<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="num1 += 10" >修改num1</button>
        <button @click="num2 += 30" >修改num2</button>
        <input type="text" v-model.number="num1">
        <span>+</span>
        <input type="text" v-model.number="num2">
        <span>=</span>
        <!-- 计算属性可以当普通属性一样用 -->
        <!-- 普通属性能怎么用，计算属性就能怎么用 -->
        <span>{{ sum }}</span>

        <!-- 计算属性有缓存 -->
        <div>{{ sum }}</div>
        <div>{{ sum }}</div>
        <div>{{ sum }}</div>
        <div>{{ sum }}</div>
        <div>{{ sum }}</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num1: 0,
                    num2: 0
                }
            },
            computed: {

                // 计算属性
                sum () {
                    console.log('sum被调用')
                   // 会在第一次使用的时候调用一次，然后就会得到一个结果，他就把结果缓存起来了
                   // 后面每次用，都是直接从缓存里取的
                   // 直到计算属性里任何一个依赖项发生变化，就会重新再调用一次计算属性，并用最新的值计算
                   // 出最新结果，然后再把新结果缓存起来
                   // 什么叫依赖项？就是计算属性里用到的别的属性，都叫依赖项
                   // 所以现在这个计算属性里有两个依赖项，分别是num1和num2
                   return this.num1 + this.num2
                }
            }
        })
    </script>
</body>
</html>